import { useAuth0 } from "@auth0/auth0-react";
import { Row, Col, Image, Space, Card } from 'antd';

export default function Profile() {
    const { user } = useAuth0();

    return (
        <Card hoverable>
            <Row gutter={[16, 16]}>
                <Col span={24}>
                    <Space><span>Name: </span><span> {user.name}</span></Space>
                </Col>

                <Col span={24}>
                    <Space><span>😀 avatar:</span> <Image src={user.picture} width={40} alt="profile avatar" /></Space>
                </Col>

                <Col span={24}>
                    <Space><span>📧 Email:</span>  <span>{user.email}</span></Space>
                </Col>

                <Col span={24}>
                    <Space><span>🔑 Auth0Id: </span><span>{user.sub}</span></Space>
                </Col>

                <Col span={24}>
                    <Space><span>✅ Email verified:</span><span>{user.email_verified?.toString()}</span></Space>
                </Col>
            </Row>
        </Card>
    );
}
